import React from "react";
import { TabBar } from "antd-mobile";
import { withRouter } from "react-router-dom";

class TabBarExample extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			selectedTab: "redTab",
			hidden: false,
			fullScreen: true,
		};
	}

	render() {
		return (
			<div
				style={
					this.state.fullScreen
						? { position: "fixed", height: "100%", width: "100%", top: 0 }
						: { height: 400 }
				}>
				<TabBar
					unselectedTintColor="#949494"
					tintColor="#ff2d4a"
					barTintColor="white"
					hidden={this.state.hidden}>
					<TabBar.Item
						title="首页"
						key="index"
						icon={<i className="iconfont icon-shouye"></i>}
						selectedIcon={<i className="iconfont icon-shouye" style={{ color: "#ff2d4a" }}></i>}
						selected={this.props.location.pathname === "/"}
						onPress={() => {
							this.props.history.push("/");
						}}>
						{this.props.location.pathname === "/" && this.props.children}
					</TabBar.Item>
					<TabBar.Item
						icon={<i className="iconfont icon-fenlei"></i>}
						selectedIcon={<i className="iconfont icon-fenlei" style={{ color: "#ff2d4a" }}></i>}
						title="分类"
						key="category"
						selected={this.props.location.pathname === "/category"}
						onPress={() => {
							this.props.history.push("/category");
						}}>
						{this.props.location.pathname === "/category" && this.props.children}
					</TabBar.Item>
					<TabBar.Item
						icon={<i className="iconfont icon-gouwuche"></i>}
						selectedIcon={<i className="iconfont icon-gouwuche" style={{ color: "#ff2d4a" }}></i>}
						title="购物车"
						key="cart"
						selected={this.props.location.pathname === "/cart"}
						onPress={() => {
							this.props.history.push("/cart");
						}}>
						{this.props.location.pathname === "/cart" && this.props.children}
					</TabBar.Item>
					<TabBar.Item
						icon={<i className="iconfont icon-wode"></i>}
						selectedIcon={<i className="iconfont icon-wode" style={{ color: "#ff2d4a" }}></i>}
						title="My"
						key="my"
						selected={this.props.location.pathname === "/my"}
						onPress={() => {
							this.props.history.push("/my");
						}}>
						{this.props.location.pathname === "/my" && this.props.children}
					</TabBar.Item>
				</TabBar>
			</div>
		);
	}
}

export default withRouter(TabBarExample);
